<template>
    <view>
        <view style="padding: 40rpx; background-color: #fff;">
            <view style="background: #F6FFF7;padding: 40rpx;border-radius: 5px;">
                <view style="display: flex;justify-content: space-between;align-items: center;">
                    <view style="display: flex;align-items: center;">
                        <image src="/questionBankMarket/static/minAchinements.svg" style="width:49rpx;height: 60rpx;">
                        </image>
                        <text style="font-size: 18px;margin-left: 10rpx;">学习成果</text>
                    </view>
                    <!-- <view>
                        <text style="color: #72777A;">练习时长</text> 
                        <text style="font-size: 18px;margin-left: 10rpx;color: #37B874;">3h 14min</text>
                    </view> -->
                </view>
                <view style="display: flex;justify-content: space-between;align-items: center;">
                    <view style="display: flex;margin-top: 30rpx;">
                        <view>
                            <view style="font-size: 20px;">{{ achievements.total || 0 }}</view>
                            <view style="color: #666666;margin-top: 10rpx;">试题总数</view>
                        </view>
                        <view style="margin-left: 60rpx;">
                            <view style="font-size: 20px;">{{ achievements.correctRate ? (achievements.correctRate *
                                100).toFixed(2)
                                : 0 }}%
                            </view>
                            <view style="color: #666666;margin-top: 10rpx;">准确率（%）</view>
                        </view>
                    </view>
                    <image src="/questionBankMarket/static/maxAchinements.svg" style="width:100rpx;height: 134rpx;">
                    </image>
                </view>
            </view>
        </view>
        <view style="margin-top: 40rpx;padding: 40rpx;background: #fff;">
            <text style="font-size: 30rpx;">能力趋势</text>
            <view :style="{ width: (windowWidth - 40) + 'px', height: (windowWidth - 40) + 'px' }">
                <l-echart v-if="JSON.stringify(lineData)!=='{}'"  ref="lineRef" @finished="onGetLine" />
            </view>
        </view>
        <view style="margin-top: 40rpx;padding: 40rpx;background: #fff;">
            <text style="font-size: 30rpx;">题型情况</text>
            <view :style="{ width: (windowWidth - 40) + 'px', height: (windowWidth - 40) + 'px' }">
                <l-echart v-if="JSON.stringify(radarData)!=='{}'" ref="radarRef" @finished="onGetRadar" />
            </view>
        </view>
        <view style="margin-top: 40rpx;padding: 40rpx;background: #fff;">
            <text style="font-size: 30rpx;">知识结构分析</text>
            <view :style="{ width: (windowWidth - 40) + 'px', height: (windowWidth - 40) + 'px' }">
                <l-echart v-if="JSON.stringify(columnarData)!=='{}'" ref="columnarRef" @finished="onGetColumnar" />
            </view>
        </view>

    </view>

</template>

<script>
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
import { getMarketItemSituation, getMarketItemStructAnalysis, getMarketResult, getMarketTrend } from '../services/QuestionBankService';

export default {
    data() {
        return {
            windowWidth: 0,
            windowHeight: 0,
            marketId: '',
            lineData: {},
            radarData: {},
            columnarData: {},
            achievements: {}, // 成果数据
        }
    },
    onShow() {

    },
    onLoad(option) {
        this.marketId = option.marketId
        uni.getSystemInfo({
            success: (res) => {
                this.windowWidth = res.windowWidth
                this.windowHeight = res.windowHeight
            }
        })
        this.onGetMarketResult()
        this.onGetMarketTrend()
        this.onGetMarketItemSituation()
        this.onGetMarketItemStructAnalysis()
    },
    onReachBottom() {

    },
    computed: {},
    methods: {
        // 线形图
        async onGetLine() {

            const chart = await this.$refs[`lineRef`].init(echarts);

            let option = {
                xAxis: {
                    type: 'category',
                    data: this.lineData.monthList || []
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: function (value) {
                            return value + '%'; // 在每个值后面添加百分比符号
                        }
                    },
                    min: 0,
                    max: 100,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    itemWidth: 12,
                    itemHeight: 12,
                    top: 0, // 将图例移到图表的上方
                    left: 'right',
                    padding: [10, 0, 0, 0],
                    icon: 'roundRect',
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                series: [{
                    name: '习题模式',
                    data: this.lineData.practiceNum || [],
                    type: 'line',
                    smooth: true,
                    showSymbol: false,
                    itemStyle: {
                        color: '#AAC5F8' // 改变柱状图颜色，同时影响图例标记颜色
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + '%';
                        }
                    },
                },
                {
                    name: '模拟考试',
                    data: this.lineData.checkNum || [],
                    type: 'line',
                    smooth: true,
                    showSymbol: false,
                    itemStyle: {
                        color: '#FF7D00' // 改变柱状图颜色，同时影响图例标记颜色
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + '%';
                        }
                    },

                }
                ],
                backgroundColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(255, 255, 255, 0)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(255, 255, 255, 0)'
                    }
                    ],
                    global: false // 缺省为 false
                }
            }
            chart.setOption(option)
        },
        // 雷达图
        async onGetRadar() {
            const chart = await this.$refs[`radarRef`].init(echarts);
            let colorArr = [
                '#4BA8FF', '#60B223', '#E1852A', '#3656FA', '#A34BFA', '#ECC83A'
            ];
            let indicatorArr = [];
            let richColor = []
            console.log(this.radarData, ' this.radarData.typeList');
            if (this.radarData.typeList) {
                this.radarData.typeList.forEach((item, index) => {
                    item.value = this.radarData.values[index]
                    item.index = index + 1
                    item.max = 100;
                    indicatorArr.push(item)
                })
                colorArr.forEach((item, idx) => {
                    richColor[`l${idx + 1}`] = {
                        width: 2,
                        height: 12,
                        backgroundColor: item
                    }
                })
            }

            let option = {
                grid: {
                    left: 10,
                    right: 20,
                    bottom: 15,
                    top: 40,
                    containLabel: true
                },
                radar: {
                    radius: '50%',
                    center: ['50%', '50%'],
                    // shape: 'circle',
                    axisName: {
                        show: true,
                        // formatter: (name, params) => {
                        //     console.log(name, 'name');
                        //     if (name) {
                        //         return [`{l${params.index}|}  {a|${params.name}}`, `{b|准确率} {x|${params.max}%}`].join('\n\n')
                        //     }
                        // },
                        formatter: function (params, obj) {
                            console.log(obj, 'obj');

                            return [
                                `{${obj.value!= '--' ? 'line' : "line_Gray"}| } {${obj.value!= '--' ? 'grayEmpty' : "grayTitle"}| ${params}}`, // 竖杠和题型
                                `\n`, // 添加竖杠和题型之间的间隔
                                `\n`, // 添加额外的换行符作为间隔
                                `{rightRate| 答题正确率}  {${obj.value != '--' ? 'primary' : "primary_gray"}|${obj.value != '--' ? obj.value : '--'}%}` // 百分数使用绿色样式
                            ].join('');
                        },
                        rich: {
                            ...richColor,
                            line: {
                                backgroundColor: '#37B874',
                                width: 4,
                                borderRadius: 4,
                                marginRight: 10,
                                height: 14, // 竖杠高度
                            },
                            line_Gray: {
                                backgroundColor: '#999999',
                                width: 4,
                                borderRadius: 4,
                                marginRight: 10,
                                height: 14, // 竖杠高度
                            },
                            a: {
                                color: '#333',
                                fontSize: 12,
                                fontWeight: 500,
                                margin: 10
                            },
                            b: {
                                fontSize: 10,
                                color: '#999999'
                            },
                            x: {
                                fontSize: 10,
                                fontWeight: 500,
                                color: '#37B874'
                            },
                            primary: {
                                color: '#37B874',
                                fontSize: 14
                            },
                            grayEmpty: {
                                color: '#37B874',
                            },
                            primary_gray: {
                                color: '#999999',
                                fontSize: 14
                            },
                            rightRate: {
                                color: '#999999'
                            },
                            grayTitle: {
                                color: '#999999'
                            }
                        }
                    },
                    indicator: indicatorArr
                },
                series: [
                    {
                        name: 'Budget vs spending',
                        type: 'radar',
                        data: [
                            {
                                value: this.radarData.values,
                                name: 'Allocated Budget'
                            }
                        ],
                        itemStyle: {
                            normal: {
                                color: '#37B874',  // 设置背景颜色及透明度
                            }
                        },
                        areaStyle: {
                            normal: {
                                opacity: 0.5  // 设置雷达图区域的透明度为0，使其透明
                            }
                        }
                    }
                ]

            }
            chart.setOption(option)
        },

        // 柱状图
        async onGetColumnar() {
            const chart = await this.$refs[`columnarRef`].init(echarts);
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {
                    data: ['答题数量', '答题正确数', '答题正确率']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.columnarData.x || [],

                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '题量（道）',
                        // min: 0,
                        // max: 250,
                        // interval: 50,
                        // axisLabel: {
                        //     formatter: '{value} ml'
                        // }
                    },
                    {
                        type: 'value',
                        name: '答题正确数',
                        min: 0,
                        max: 100,
                        interval: 10,
                        axisLabel: {
                            formatter: '{value}%',
                            margin: 5, // 增加边距
                            // padding: [0, 0, 0, 10] // 增加右侧的 padding
                        },

                    }
                ],
                series: [
                    {
                        name: '答题数量',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '道';
                            }
                        },
                        data: this.columnarData.totalNum || []
                        // data: [
                        //     2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                        // ]
                    },
                    {
                        name: '答题正确数',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '道';
                            }
                        },
                        data: this.columnarData.correctNum || []
                    },
                    {
                        name: '答题正确率',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '%';
                            }
                        },
                        data: this.columnarData.correctRate || []
                        // data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                    }
                ]
            }
            chart.setOption(option)
        },

        // 学习成果
        onGetMarketResult() {
            getMarketResult({ marketId: this.marketId }).then(res => {
                this.achievements = res
            })
        },

        // 线形图数据
        onGetMarketTrend() {
            getMarketTrend({ marketId: this.marketId }).then(res => {
                this.lineData = res
            })
        },
        // 雷达图
        onGetMarketItemSituation() {
            getMarketItemSituation({ marketId: this.marketId }).then(res => {
                this.radarData = res
            })
        },
        // 柱状图
        onGetMarketItemStructAnalysis() {
            getMarketItemStructAnalysis({ marketId: this.marketId }).then(res => {
                this.columnarData = res
            })
        }
    },


}
</script>

<style lang="scss"></style>